//页面加载的顺序是从上到下，如果js写得比较靠前，很有可能获取不到未加载的元素。
//创建对象时，传入构造的参数，是一个 js 对象
let navApp = new Vue( {
    //element 绑定到指定元素上。根据元素id绑定
    el:'#navApp',
    //当前对象的所有的成员属性都在 data中声明，data是固定的属性名，vue2要求的。
    data:{
        tags: []
    },  //别忘了逗号
    //所有自定义函数都定义在 methods 中，
    methods:{
        //自定义的一个函数，发送异步请求，获取响应数据
        //loadTags是自定义的方法名。
        loadTags:function(){
            //console.log("页面加载时，发送 /tag 异步请求");
            //发送异步请求
            $.ajax({
                url: "/tags" ,
                method: "GET" ,
                success: function ( r ){
                    console.log("服务器成功响应数据")
                    if(r.code == 200){
                        console.log("服务器响应200");
                        //把服务器返回的结果给到当前vue实例 tags属性上。
                        navApp.tags = r.data;
                        console.log("成功赋值")
                        console.log( navApp.tags );
                    }
                }
            });
        }
    },
    //方法的调用：可以绑定到一个事件。单击，双击，数据改变，和用户的交互动作。
    //如何能自动运行？
    // 钩子函数：Vue实例对象，创建，初始化，渲染，销毁都有一个时间节点。
    // 当 Vue实例达到对应的时间节点，会自动调用内置函数，这些函数就叫钩子函数。
    // 钩子函数特点：1.内置函数。 2.满足生命周期节点自动调用。（不管用不用，都执行）
    // Vue提供自动调用方法的入口
    // created 是 Vue钩子函数，表示页面加载完成之后立即运行
    created:function() {
        this.loadTags();
    }
} );